import React from "react"

export default class Life extends React.Component{
    lifetime=`
    initial render                           父组件render   
        |                                        |
        v                                        v
     constructor()                         componentWillReceiveProps(nextProps) //父组件传递的props发生修改
        |                                        |
        V                                        V
     componentWillMount()//挂载前           shouldComponentUpdate(nextstate,nextProps) <---this.setState  //是否需要冲洗渲染
        |                                        |
        |                                        V
        |                                  componentUpdate(nextState,nextProps)
        |                                        |
        V                                        V
        -------------  render  ---------------------
        |                                        |
        V                                        V
      componentDidMount()//挂载后         componentDidUpdate()
        |                                        |
        V                                        V
        -------- componentWillUnmount() ----------
                         |
                         V
   `
   
    // componentWillMount(){
    //     console.log('挂载前')
    // }
    componentDidMount(){
        console.log('挂载后')
        console.log(this.lifetime)
    }
    shouldComponentUpdate(nextstate,nextProps){
        console.log(nextstate,nextProps,'数据发生改变')
        return  true
    }
    componentDidUpdate(){
        console.log('数据更新完成')
    }
    componentWillUnmount(){
        console.log('组件销毁')
    }
    render(){
        // let lifetime=`
        //   initial render                           父组件render   
        //       |                                        |
        //       v                                        v
        //    constructor()                         componentWillReceiveProps(nextProps) //父组件传递的props发生修改
        //       |                                        |
        //       V                                        V
        //    componentWillMount()//挂载前           shouldComponentUpdate(nextstate,nextProps) <---this.setState  //是否需要冲洗渲染
        //       |                                        |
        //       |                                        V
        //       |                                  componentUpdate(nextState,nextProps)
        //       |                                        |
        //       V                                        V
        //       -------------  render  ---------------------
        //       |                                        |
        //       V                                        V
        //     componentDidMount()//挂载后         componentDidUpdate()
        //       |                                        |
        //       V                                        V
        //       -------- componentWillUnmount() ----------
        //                        |
        //                        V
        // `
        return <div>
          <h3>React 生命周期</h3>

          <div style={{width:'500px',textAlign:'center'}}>
              {this.lifetime}
          </div>
        </div>
    }
}